<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<button class="btn up" id='btn1'>上移</button>
		<button class="btn down" id = 'btn2'>下移</button>
		<hr />
		<table border = '1' id = "tab">
			<tr>
				<td><input type="checkbox" /></td>
				<td>items1</td>
				<td>items2</td>
				<td>items3</td>
				<td>items4</td>
				<td>items5</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>items1</td>
				<td>items2</td>
				<td>items3</td>
				<td>items4</td>
				<td>items5</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>items1</td>
				<td>items2</td>
				<td>items3</td>
				<td>items4</td>
				<td>items5</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>items1</td>
				<td>items2</td>
				<td>items3</td>
				<td>items4</td>
				<td>items5</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>items1</td>
				<td>items2</td>
				<td>items3</td>
				<td>items4</td>
				<td>items5</td>
			</tr>
		</table>
		
		<script src = "../lib/jquery-3.1.1.js"></script>
		<script>
			!function(window,document,$,undefined){
				
				var $btn = $('.btn');
				
	
				$btn.on('click',function(){
					var $this = $(this),
						$target = $('#tab input[type="checkbox"]:checked');
						
						if($target.length>1){
							return;
						}
						
					if($this.hasClass('up')){
						$target.parents('tr').prev('tr').before($target.parents('tr'))
					}else{
						$target.parents('tr').next('tr').after($target.parents('tr'))
					}
				});
					
			}
			(window,document,$);
		</script>
	</body>
</html>
